<template>
	<div class="main-page">
		<div class="nav-bar">
			<text @click="back()">返回上一页</text>
		</div>
		<div class="nav">
			<text>生成图片</text>
			<text @click="addText" style="margin-left: 80px;">添加标注</text>
		</div>
		<view class="image-div">
			<view class="grid-view">
				<view class="grid-view-item" v-for="(item,index) in imageList" :key="index">
					<image class="grid-view-image" :src="item.url" mode="aspectFill" @click="addUrlPic(item)"></image>
				</view>
			</view>
			<image src="/static/logo.png" style="width: 150px; height: 150px;"></image>
		</view>

		<movable-area class="movable-area">
			<movable-view class="movable-view" :inertia="true" direction="all" v-for="(item, index) in dataList"
				:key="index" :x="item.x" :y="item.y" :scale="item.scale" @touchstart="handleTouchStart(index)"
				@touchmove="handleTouchMove(index)" @touchend="handleTouchEnd(index)">
				<image v-if="item.type == 'pic'" class="scalable-image" :src="item.value" mode="aspectFit" />
				<view class="float-btn" v-else>{{ item.value }}</view>
			</movable-view>
		</movable-area>
	</div>
</template>

<script>
export default {
  data() {
    return {
      imageList : [
        {id:1,url:'https://q6.itc.cn/q_70/images01/20240304/660facb0e24a428593e135a0073560eb.jpeg'}
      ],
      dataList: [],
      lastTapTimeoutFunc: null,
      lastTapDiffTime: 0,
      // 缩放相关
      scale: true,
      lastScale: 1,
      startX: 0,
      startY: 0,
      lastDistance: 0,
      isDragging: false,
      isScaling: false,
    }
  },
  methods: {
    back(){
      uni.navigateBack()
    },
    addUrlPic(e){
      this.dataList.push({
        x:0,
        y:0,
        scale: true, // 初始缩放比例
        type: 'pic',
        value: e.url
      })
    },
    addPic() {
      this.dataList.push({
        x:0,
        y:0,
        scale: 1, // 初始缩放比例
        type: 'pic',
        value: '/static/logo.png'
      })
    },
    move(e){
      let index = e.currentTarget.dataset.index
      this.dataList[index].x = e.detail.x
      this.dataList[index].y = e.detail.y
    },
    addText() {
      this.dataList.push({
        x:0,
        y:0,
        scale: true, // 初始缩放比例
        type: 'text',
        value: '添加标注'
      })
    },
    handleTouchStart(index) {
      const item = this.dataList[index];
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      if (event.touches.length === 2) {
        this.isScaling = true;
        this.lastDistance = this.getDistance(event.touches[0], event.touches[1]);
        this.lastScale = item.scale;
      } else {
        this.isDragging = true;
      }
    },
    handleTouchMove(index) {
      const item = this.dataList[index];
      if (this.isDragging) {
        let moveX = event.touches[0].clientX - this.startX;
        let moveY = event.touches[0].clientY - this.startY;
        item.x += moveX;
        item.y += moveY;
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      } else if (this.isScaling) {
        let currentDistance = this.getDistance(event.touches[0], event.touches[1]);
        let scaleChange = currentDistance / this.lastDistance;
        item.scale = this.lastScale * scaleChange;
        // 限制缩放比例范围
        item.scale = Math.min(Math.max(item.scale, 0.5), 3);
        this.lastDistance = currentDistance;
        this.lastScale = item.scale;
      }
    },
    handleTouchEnd(index) {
      this.isDragging = false;
      this.isScaling = false;
    },
    getDistance(point1, point2) {
      const dx = point1.clientX - point2.clientX;
      const dy = point1.clientY - point2.clientY;
      return Math.sqrt(dx * dx + dy * dy);
    },
    handClick(e) {
      console.log(e)
      let _this = this;
      let curTime = new Date().getTime();
      let lastTime = _this.lastTapDiffTime;
      _this.lastTapDiffTime = curTime;
      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      console.log(diff)
      if (diff < 500) {
        console.log("双击")
        this.dataList.splice(e,1)
        //_this.handleVideo('screen',index)自定义事件
        clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
      } else {
        // 单击事件延时300毫秒执行
        _this.lastTapTimeoutFunc = setTimeout(function() {
          console.log("单击")
          //_this.handleVideo('playOrStop',index)自定义事件
        }, 300);
      }
    }
  }
}
</script>
<style scoped lang="less">
page {
  width: 100vw;
  height: 100vh;
}

.image-div{
  display: flex;
  flex-direction: row;
  width: 80%;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.grid-view{
  display: grid;
  width: 150px;
  grid-template-columns: repeat(3,1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  .grid-view-item{
    display: flex;
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;
    .grid-view-image{
      display: block;
      position: absolute;
      height: 40px;
      width: 40px;
    }
  }
}

.main-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  align-items: center;
}
.nav-bar{
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  align-items: center;
}
.nav {
  width: 80%;
  height: 64px;
  display: flex;
  flex-direction: row;
}

.movable-area {
  //  可移动的范围
  width: 80%;
  box-sizing: border-box;
  flex: 1;
  border: 2px solid blue;
  margin-bottom: 80px;
}

.scalable-image {
  width: 50px;
  height: 50px;
}

.movable-view {
  width: auto; // 按钮大小
  height: auto;
  pointer-events: auto; //恢复鼠标事件
}

.float-btn {
  max-width: 140px;
  font-size: 16px;
  color: black;
}
</style>
